<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<link rel="stylesheet" href="bootstrap-4.5.0-dist/css/bootstrap.min.css">
	<script src="js/jquery-3.6.0.min.js"></script>
	<script src="bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="css/username.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1327450_9qlr53v4dy.css">
	
</head>
<body>
	<div class="div4">

	
    <!-- 头部 -->
    <div class="div1">
        <div class="span1">
            <span >星巴克数据-管理系统</span>
        </div>
    </div>
    <!-- 管理系统 -->
    <div class="div2">
        <!-- 左边框 -->
            <div class="left">
				<ul class="left-nav">
					<li>
						<i class="iconfont icon-weixin"></i>
						<a  href="">用户管理</a>
					</li>
				</ul>
        </div>
	
        <!-- 右边框 -->
        <div class="right">
					<!-- 按钮组 -->
					<div class="div3">	
						<div class="btus">				
						   <button class="btn btn-primary" data-toggle="modal" data-target="#add" >新建</button>
						   <button class="btn btn-primary" data-toggle="modal" data-target="#delete" >批量删除</button>
					</div>
					
					<!-- 表格区域 -->
					<table class="table">
						<thead>
							<tr>
								<td>编号</td>
								<td>用户名</td>
								<td>密码</td>
								<td>操作</td>
							</tr>
						</thead>
						<tbody>
							
							<tr>
								<td> <input type="checkbox">1</td>
								<td>张三</td>
								<td>123456</td>
								<td>
										<button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#delete">删除</button>
										<button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#edit">编辑</button>
								</td>
							</tr>
                            	
							<tr>
								<td> <input type="checkbox">2</td>
								<td>李四</td>
								<td>654321</td>
								<td>
									<button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#delete">删除</button>
									<button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#edit">编辑</button>
								</td>
							</tr>

                            <tr>
								<td> <input type="checkbox">3</td>
								<td>王五</td>
								<td>789456</td>
								<td>
									<button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#delete">删除</button>
									<button type="button" class="btn btn-outline-primary"  data-toggle="modal" data-target="#edit">编辑</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
        </div>
	</div>
</div>
<!--模态框1：新建 add -->
<div class="modal fade" id="add" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLabel">用户管理：新增</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
		  <form action="xx" method="POST">
						  <div class="form-group row">
							  <label for="inputEmail3" class="col-sm-2 col-form-label">用户名</label>
							  <div class="col-sm-10">
								  <input type="text" class="form-control" id="add-username" name="username">
							  </div>
						  </div>
						  <div class="form-group row">
							  <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
							  <div class="col-sm-10">
								  <input type="password" class="form-control" id="inputPassword3">
							  </div>
						  </div>
				  </form>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		  <button type="button" class="btn btn-primary">确认新建</button>
		</div>
	  </div>
	</div>
  </div>
  
  <!--模态框2：编辑 edit-->
  <div class="modal fade" id="edit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLabel">用户管理：编辑</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
		  <form action="xx" method="POST">
					  <div class="form-group row">
							  <label for="inputEmail3" class="col-sm-2 col-form-label">用户名</label>
							  <div class="col-sm-10">
								  <input type="text" class="form-control" id="add-username" name="username" value="张三">
							  </div>
						  </div>
						  <div class="form-group row">
							  <label for="inputPassword3" class="col-sm-2 col-form-label">密码</label>
							  <div class="col-sm-10">
								  <input type="password" class="form-control" id="inputPassword3">
							  </div>
						  </div>
				  </form>
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
		  <button type="button" class="btn btn-primary">确认编辑</button>
		</div>
	  </div>
	</div>
  </div>
  
  <!--模态框3：删除 delete-->
  <div class="modal fade" id="delete" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title" id="exampleModalLabel">用户管理：删除</h5>
		  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		  </button>
		</div>
		<div class="modal-body">
		  确定删除该条信息吗？
		</div>
		<div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
		  <button type="button" class="btn btn-primary">确定删除</button>
		</div>
	  </div>
	</div>
  </div>
</body>
</html>